// 企业碳资产构成展示
import React, { Children, useEffect, useState, useRef } from 'react';
import { connect } from 'dva';
import * as echarts from 'echarts';
import './assetComposition.less';
import { Table, Input, Button } from 'antd';
import 'antd/dist/antd.css';
import { getAssetsStatisticsData, getCompositionList } from '@/services/carbon'

const assetComposition = (props) => {
  // 图表数据
  const [seriesData, setSeriesData] = useState({})
  // 表格总数据
  const [dataSource, setDataSource] = useState([]);
  // 分页数据
  const [pagination, setPagination] = useState({
    pageNum: 1,
    current: 1,
    pageSize: 20,
    total: 0,
  });
  // 项目查询值
  const [itemName, setItemName] = useState('');
  // 类型查询值
  const [itemType, setItemType] = useState('');
  // 业主查询值
  const [itemConpany, setItemConpany] = useState('');
  // 表格自适应高度
  const [scrollY, setScrollY] = useState(0);
  const containerRef = useRef(null);
  // 表格自适应高度钩子
  useEffect(() => {
    const handleResize = () => {
      if (containerRef.current) {
        const containerHeight = containerRef.current.clientHeight;
        setScrollY(containerHeight - 210); // 100 是你想减去的像素值
      }
    };
    handleResize(); // 初始化时计算高度
    window.addEventListener('resize', handleResize); // 添加 resize 事件监听
    return () => {
      window.removeEventListener('resize', handleResize); // 清理事件监听
    };
  }, []);
  
  useEffect(() => {
    // 调用获取图表接口
    fetchAssetsStatisticsData()
    // 调用表格数据接口
    fetchReductionList()
    }, [])
  
  // 监听图表数据，渲染图表
  useEffect(() => {
    if (!seriesData.cakeData) {
      return
    }
    let leftChart = echarts.init(document.getElementById("assessLeftChart"));
    let rightChart = echarts.init(document.getElementById("assessRightChart"));
    // 计算饼图项目总数
    let total = 0;
    for (var i = 0; i < seriesData.cakeData.length; i++) {
      total += seriesData.cakeData[i].value;
    }
    leftChart.setOption({
      title: {
        text: total,
        subtext: '个项目',
        top: '30%',
        left: 'center',
        textStyle: {
          fontSize: '28',
          fontWeight: 'bold'
        },
        subtextStyle: {
          fontSize: '18',
          color: '#000',
          fontWeight: 'bold'
        }
      },
      tooltip: {
        show: false,
        formatter: '{b}: {c} ({d}%)'
      },
      series: [
        {
          name: 'CCER减碳项目个数占比',
          type: 'pie',
          radius: ['55%', '75%'],
          center: ['50%', '40%'],
          avoidLabelOverlap: false,
          textAlign: 'center',
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 22,
              formatter: function (params) {
                return params.value + `\n \n` + params.name;
              },
              fontWeight: 'bold',
            }
          },
          labelLine: {
            show: true
          },
          data: seriesData.cakeData
        },
      ]
    });
    // 鼠标移入移除显示对应项目数及总数更换
    leftChart.on('mouseover', { seriesName: 'CCER减碳项目个数占比' }, params => {
      leftChart.setOption({
        title: {
          show: false
        }
      })
    })
    leftChart.on('mouseout', { seriesName: 'CCER减碳项目个数占比' }, params => {
      leftChart.setOption({
        title: {
          show: true
        }
      })
    })
    rightChart.setOption({
      tooltip: {
        backgroundColor: '#fff',
        borderColor: '#fff',  // 设置边框颜色
        borderWidth: 5,  // 设置边框宽度
        padding: [10, 10],  // 内边距，分别表示上下和左右间距
        // 可以根据需要设置其他样式，比如字体颜色、边框等
        textStyle: {
          color: '#000'  // 提示框文字颜色
        },
        // 自定义提示框内容
        formatter: function (params) {
          let tooltipContent = params[0].axisValue + '<br/>'; // 添加当前 x 轴内容
          params.forEach(function (item) {
            let unit = '万元' // 根据系列下标判断单位类型
            tooltipContent += `${item.seriesName}:<span style="font-weight: bold;margin-left: 20px">${item.value}</span><span style="color: fff;margin-left: 20px">${unit}</span><br/>`;
          });
          return tooltipContent;
        },
        trigger: 'axis',
        axisPointer: {
          show: false,
          type: 'none',  // 设置为线型，可以是 'line' | 'shadow' | 'cross'
          lineStyle: {
            color: '#000',  // 参考线的颜色
            width: 2,  // 参考线的宽度
            type: 'dashed'  // 参考线的类型，可以是 'solid' | 'dashed' | 'dotted'
          }
        }
      },
      xAxis: {
        type: 'value',
        show: false,
      },
      yAxis: {
        type: 'category',
        data: seriesData.yAxis,
        inverse: true,
        axisLine: {
          show: false  // 隐藏 y 轴轴线
        },
        axisTick: {
          show: false  // 隐藏刻度线
        },
        axisLabel: {
          show: true,  // 显示 y 轴标签（轴名）
          // 可以根据需要进一步定制标签样式
        }
      },
      grid: {
        containLabel: true,  // 包含刻度标签在内
        left: 50,  // 调整图表左边距
        right: 50,  // 调整图表右边距
        top: 0,  // 调整图表上边距
        bottom: 20,  // 调整图表下边距
        borderColor: '#ccc',  // 网格边框颜色
        borderWidth: 1,  // 网格边框宽度
        show: false  // 显示网格
      },
      series: [
        {
          name: '碳资产预估收益',
          type: 'bar',
          yAxisIndex: 0,
          data: seriesData.series,
          barWidth: '90%',
          label: {
            show: false, // 显示数据标签
            align: 'center', // 标签显示在柱子顶部
            verticalAlign: 'middle',
            color: '#000'
          },
          itemStyle: {
            // 柱子样式
            color: '#25B6B6', // 柱子颜色
            borderColor: '#25B6B6', // 柱子边框颜色
            borderWidth: 0 // 柱子边框宽度
          },
          barWidth: '60%',
        }
      ],
      dataZoom: [
        {
          // 设置滚动条的隐藏与显示
          show: true,
          // 设置滚动条类型
          type: "slider",
          // 设置背景颜色
          backgroundColor: "#e9eaed",
          // 设置选中范围的填充颜色
          fillerColor: "#bbb",
          // 设置边框颜色
          borderColor: "#e9eaed",
          // 是否显示detail，即拖拽时候显示详细数值信息
          showDetail: false,
          // 数据窗口范围的起始数值
          startValue: 0,
          // 数据窗口范围的结束数值（一页显示多少条数据）
          endValue: 10,
          // empty：当前数据窗口外的数据，被设置为空。
          // 即不会影响其他轴的数据范围
          filterMode: "empty",
          // 设置滚动条宽度，相对于盒子宽度
          width: 8,
          // 设置滚动条高度
          height: "90%",
          // 设置滚动条显示位置
          right: "right",
          top: "top",
          // 是否锁定选择区域（或叫做数据窗口）的大小
          zoomLoxk: true,
          // 控制手柄的尺寸
          handleSize: 0,
          // dataZoom-slider组件离容器下侧的距离
          // bottom: 5,
          yAxisIndex: 0,
          orient: 'vertical', // 设置为竖向
        },
        {
          // 没有下面这块的话，只能拖动滚动条，
          // 鼠标滚轮在区域内不能控制外部滚动条
          type: "inside",
          // 滚轮是否触发缩放
          zoomOnMouseWheel: false,
          // 鼠标滚轮触发滚动
          moveOnMouseMove: true,
          moveOnMouseWheel: true,
          zoomLoxk: true,
          width: 8,
          // 设置滚动条高度
          height: "90%",
          right: "right",
          top: "top",
          yAxisIndex: 0,
          orient: 'vertical', // 设置为竖向
        },
      ]
    });
    // 绘制图表
    window.onresize = function () {
      // 自适应大小
      leftChart.resize();
      rightChart.resize();
    };
  }, [seriesData])

  // 监听当前页发生改变，查询表格数据
  useEffect(() => {
    fetchReductionList();
  }, [pagination.pageNum])

  // 获取表格数据接口
  const fetchReductionList = async (params) => {
    try {
      // 拼接页数数据及筛选项数据，获取接口数据并赋值
      const res = await getCompositionList({ ...pagination, itemName: itemName, itemConpany: itemConpany, itemType: itemType })
      if (res.code === 200) {
        setDataSource(res)
        setPagination({ ...pagination, total: res.total })
      }
    } catch (error) {
      console.error(error);
    }
  };

  const fetchAssetsStatisticsData = async () => {
    try {
      // 获取接口数据并赋值
      const res = await getAssetsStatisticsData()
      if (res.code === 200) {
        setSeriesData(res.data)
      }
    } catch (error) {
      console.error(error);
    }
  };

  // 切换当前页，修改当前页的值，再触发监听钩子
  const handlePaginationChange = (page) => {
    setPagination({ ...pagination, pageNum: page, current: page });
  };

  // 表格列配置
  const columns = [
    { title: '项目名称', dataIndex: 'itemName', key: 'itemName', width: '35%', align: 'center' },
    { title: '业主公司', dataIndex: 'itemConpany', key: 'itemConpany', width: "35%", align: 'center' },
    { title: '项目类型', dataIndex: 'itemType', key: 'itemType', width: "15%", align: 'center' },
    { title: '预估收益(万元)', dataIndex: 'money', key: 'money', width: "15%", align: 'center' },
  ];

  // 处理搜索按钮点击事件
  const handleSearch = () => {
    // 当前页为第一页时，不改变当前页直接直接调用接口，否则将当前页设置成第一页
    if (pagination.pageNum === 1) {
      fetchReductionList()
    } else {
      setPagination({ ...pagination, pageNum: 1, current: 1 });
    }
  };

  return (
    <div className="assetComposition-content">
      <div className="top-box">
        <div className="filter-container">
          <div className="filter-row">
            <div className="filter-item">
              <span className="filter-name">项目查询:</span>
              <Input
                style={{ flex: 1 }}
                placeholder="请输入想要查询的项目名称"
                value={itemName}
                onChange={e => setItemName(e.target.value)}
              />
            </div>
            <div className="filter-item">
              <span className="filter-name">类型查询:</span>
              <Input
                style={{ flex: 1 }}
                placeholder="请输入想要查询的项目类型名称"
                value={itemType}
                onChange={e => setItemType(e.target.value)}
              />
            </div>
          </div>
          <div className="filter-row">
            <div className="filter-item">
              <span className="filter-name">业主查询:</span>
              <Input
                style={{ flex: 1 }}
                placeholder="请输入想要查询的业主名称"
                value={itemConpany}
                onChange={e => setItemConpany(e.target.value)}
              />
            </div>
            <div className="filter-item">
              <Button type="primary" onClick={handleSearch} className="searchBtn">
                搜索
              </Button>
            </div>
          </div>
        </div>

        <div className="table-container" ref={containerRef}>
          <Table
            dataSource={dataSource.rows}
            columns={columns}
            pagination={{
              ...pagination,
              showSizeChanger: false,
              pageSizeOptions: [],
              onChange: handlePaginationChange,
            }}
            scroll={{ y: scrollY }}
          />
        </div>

      </div>
      <div className="bottom-box">
        <div className="left-box">
          <div className="title">碳资产构成分析</div>
          <div className="chart-box">
            <div id="assessLeftChart"></div>
          </div>
        </div>
        <div className="right-box">
          <div className="title">碳资产收益分析</div>
          <div className="chart-box">
            <div id="assessRightChart"></div>
          </div>
        </div>
      </div>
    </div>
  )
};

export default connect()(assetComposition);
